import { nextTick, onMounted, reactive, ref } from 'vue'
import ApiAuthMenu from '~/apis/auth/ApiAuthMenu'
import { DialogType } from '~/types/Enum'
import { getTabelTree } from '~/views/auth/util/tree'

export const index = () => {
    const ruleFormRef = ref<any>()

    const conf = reactive({
        table: {
            expandall: true,
            source: [] as any[],
            data: [] as any[]
        },
        dialog: {
            title: '',
            labelWidth: 100,
            rules: {
                title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                url: [{ required: true, message: '请输入地址', trigger: 'blur' }]
            },
            show: false,
            loading: false,
            type: DialogType.Insert,
            form: {} as form,
            formAs: {} as formAs,
            formDefault: {
                parentId: '0',
                title: '',
                url: '',
                sort: 0,
                type: 0,
                desc: '',
                nav: true,
                icon: '',
                iconName: '',
                iconFill: [],
                iconFillModel: [{ value: '#000000' }, { value: '#000000' }, { value: '#000000' }, { value: '#000000' }],
                iconFillLength: 1
            },
            formAsDefault: {
                parentName: '根'
            },
            remove: {
                show: false,
                item: {} as any
            }
        },

        icondialog: {
            show: false,
            closeItem: (_item: any) => {
                const item = JSONUtil.cp(_item)
                conf.dialog.form.iconName = item.name
                conf.dialog.form.icon = item.item.type
                conf.dialog.form.iconFillLength = item.item.param.fill
                changeIconFill()
            }
        }
    })

    const dialogShow = (type: DialogType, item?: any) => {
        const formEl = ruleFormRef.value
        if (formEl) formEl.resetFields()
        conf.dialog.type = type
        if (type === DialogType.Insert) {
            conf.dialog.title = '新增'
            conf.dialog.form = JSONUtil.cp(conf.dialog.formDefault)
            conf.dialog.formAs = JSONUtil.cp(conf.dialog.formAsDefault)
            conf.dialog.formAs.parentName = item ? item.title : '根'
            conf.dialog.form.parentId = item ? item.id : '0'
            conf.dialog.form.sort = item.children?.length + 1
        } else if (type === DialogType.Update) {
            conf.dialog.title = '编辑'
            const _from = JSONUtil.cp(item)
            _from.iconFillLength = _from.iconFill.length
            const iconFillModel = JSONUtil.cp(conf.dialog.formDefault.iconFillModel)
            _from.iconFillModel = iconFillModel.map((_item, index) => {
                if (_from.iconFill[index]) _item.value = _from.iconFill[index]
                return _item
            })
            conf.dialog.form = _from
            conf.dialog.formAs = JSONUtil.cp(conf.dialog.formAsDefault)

            let parent = conf.table.source.filter((el) => el.id === item.parentId)[0]
            conf.dialog.formAs.parentName = parent ? parent.title : '根'
            console.log(conf.dialog.form)
        }
        conf.dialog.show = true
    }

    const dialogSubmit = async () => {
        const formEl = ruleFormRef.value
        if (!formEl) return
        conf.dialog.loading = true
        await formEl.validate(async (valid: any, fields: any) => {
            if (valid) {
                let form = JSONUtil.cp(conf.dialog.form)
                form.iconFillModel.length = form.iconFillLength
                form.iconFill = form.iconFillModel.map((item) => item.value)
                form.iconFillLength = undefined as any
                form.iconFillModel = undefined as any
                const res = await ApiAuthMenu.save(form)
                if (res.status) {
                    await getTableData()
                    conf.dialog.show = false
                }
            }
            conf.dialog.loading = false
        })
    }

    const dialogSubmitRemove = async (id: string) => {
        const res = await ApiAuthMenu.remove(id)
        if (res.status) {
            await getTableData()
        }
    }

    const getTableData = async () => {
        const res = await ApiAuthMenu.list()
        if (res.status) {
            conf.table.source = JSONUtil.cp(res.data)
            conf.table.data = [getTabelTree(0, conf.table.source)]
        }
    }

    const onExpandall = () => {
        conf.table.expandall = !conf.table.expandall
        let dataT = JSONUtil.cp(conf.table.data)
        conf.table.data = []
        nextTick(() => {
            conf.table.data = dataT
        })
    }

    const changeIconFill = () => {
        const iconFillModel = JSONUtil.cp(conf.dialog.form.iconFillModel)
        conf.dialog.form.iconFill = iconFillModel.map((item) => item.value)
        console.log(conf.dialog.form.iconFill)
    }

    onMounted(async () => {
        getTableData()
    })

    return {
        conf,
        dialogSubmit,
        dialogShow,
        ruleFormRef,
        onExpandall,
        dialogSubmitRemove,
        changeIconFill
    }
}

type form = {
    parentId: string
    title: string
    url: string
    sort: number
    type: number
    desc: string
    nav: boolean
    icon: string
    iconName: string
    iconFill: string[]
    iconFillModel: { value: string }[]
    iconFillLength: number
}

type formAs = {
    parentName: string
}
